<html>
    <head>
        <style>
            .op-100 {
            background: green;
            opacity: 1.0;
            }
            .op-70 {
            background: green;
            opacity: 70%;
            }
            .op-50 {
            background: green;
            opacity: 0.5;
            }
            .op-30 {
            background: green;
            opacity: 30%;
            }
            .op-0 {
            background: green;
            opacity: 0;
            }
            .red {
            background: red;
            }
        </style>
    </head>
    <body>
        <div class=op-100>
            100% opacity
        </div>
        <div class=op-70>
            70% opacity
        </div>
        <div class=op-50>
            50% opacity
        </div>
        <div class=op-30>
            30% opacity
        </div>
        <div class=op-0>
            0% opacity
        </div>
        <div class="red">
            Blending with other colors
            <div class=op-100>
                100% opacity
            </div>
            <div class=op-70>
                70% opacity
            </div>
            <div class=op-50>
                50% opacity
            </div>
            <div class=op-30>
                30% opacity
            </div>
            <div class=op-0>
                0% opacity
            </div>
        </div>
        <div class=op-70>
            70% opacity
            <div class=op-50>
                50% opacity inside 70% opacity
            </div>
        </div>
    </body>
</html>
